<script setup>
import { ref, watch } from "vue";
import "@material/web/select/outlined-select";
import "@material/web/select/select-option";

function getMonth() {
  let month = `${new Date().getMonth() + 1}`;
  if (month.length < 2) {
    month.padStart(1, "0");
  }
  return month;
}

const props = defineProps(["yearLabel", "monthLabel"]);
const year = defineModel("year", { default: `${new Date().getFullYear()}` });
const month = defineModel("month", { default: `${getMonth()}` });
const yearSelectedIndex = ref(year.value - 1999);
const monthSelectedIndex = ref(month.value);

watch(year, year => {
  yearSelectedIndex.value = year - 1999;
});

watch(yearSelectedIndex, yearSelectedIndex => {
  year.value = yearSelectedIndex + 1999;
});

watch(month, month => {
  monthSelectedIndex.value = month;
});

watch(monthSelectedIndex, monthSelectedIndex => {
  month.value = monthSelectedIndex;
});

</script>

<template>
  <md-outlined-select class="start-year" :label="props.yearLabel" v-model="yearSelectedIndex">
    <md-select-option v-for="n in 100" :value="n" :key="n">
      <div slot="headline">{{ n + 1999 }}</div>
    </md-select-option>
  </md-outlined-select>
  <md-outlined-select class="start-month" :label="props.monthLabel" v-model="monthSelectedIndex">
    <md-select-option v-for="n in 12" :value="n" :key="n">
      <div slot="headline">{{ n }}</div>
    </md-select-option>
  </md-outlined-select>
</template>